<template>
	<view class="content" :style="'background:' + info.back_color">
		<nav-bars backState="1000" bgColor="#fff" fontColor="#333" title="活动主题"></nav-bars>
		<view class="top-banner">
			<image :src="info.img.path" mode="widthFix"></image>
			<!-- <image :src="imageSrc+'/static/activity/zt-head.jpg'"></image> -->
		</view>
		<view class="main-content main-bg" :style="{background: 'url('+info.back_img.path+')',backgroundSize:'100% 100%'}">
			<!-- 视频 -->
			<view class="video-common-mt" v-if="info.video.path">
				<view>
					<video class="ztVideo" :src="info.video.path" @error="videoErrorCallback" controls></video>
				</view>
			</view>
			<!-- 商品 -->
			<view class="titles" v-if="list.length>0">-精品推荐-</view>
			<view class="goods-box" v-if="list.length>0">
				
				<view class="goods-item" v-for="(item,index) in list" :key="index" @click="goSkip('/pages_mall/pages/mall/goods_details/virtualGoods?id='+item.good_id)">
				 <view class="goodnow">
					<!-- <image class="goods-image" :src="imageSrc+'/static/activity/iPhone13.png'"></image> -->
					<image class="goods-image" :src="item.img" mode="widthFix"></image>
					<view class="title">{{item.name}}</view>
					<view class="msg">{{item.sub_name}}</view>
				 </view>	 	
				</view>
			</view>
			<view class="u-parse">
				<u-parse :html="info.rules"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import activity from '@/service/activity.js'
	export default {
		components: {

		},
		data() {
			return {
				navBackground: '',
				imageSrc: this.$static,
				code: '',
				page: 1,
				pagesize: 10,
				info: {},
				list: [],
				userId:'',
			}
		},
		onLoad(options) {
			this.code = options.code;
			this.getDetails(options.code);
			this.goodsList(options.code);
			this.userId = uni.getStorageSync('userId');
		},
		onShareAppMessage(res) {
			uni.showShareMenu({
				withShareTicket: true
			})
			if (res.from === 'menu') {}
				return {
					title: this.info.name,
					//imageUrl: this.goodsInfo.round_imgs[0].image_path,
					imageUrl: this.info.img.path,
					path: '/pages_activity/pages/theme/index?code='+this.code+'&share_uid=' + this
						.userId,
					success: function(res) {
						console.log('成功', res);
					}
				};
			
			
		},
		onShareTimeline(res) {
			if (res.from === 'menu') {}
				return {
					title: this.info.name,
					//imageUrl: this.goodsInfo.round_imgs[0].image_path,
					imageUrl: this.info.img.path,
					path: '/pages_activity/pages/theme/index?code='+this.code+'&share_uid=' + this
						.userId,
					success: function(res) {
						console.log('成功', res);
					}
				};
			
		},
		methods: {
			goSkip(url) {
				this.$common.navigateTo(url);
			},
			getDetails(code) {
				uni.showLoading()
				activity.themeDetails({
						code: code,
						page: 1,
						pagesize: 10,
						user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						uni.hideLoading()
						let _this = this;
						if (res.code == 1) {
							this.info = res.data;
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {
						uni.hideLoading()
					})
			},
			//商品列表
			goodsList(code) {
				uni.showLoading()
				activity.activityGoods({
						page: this.page,
						pagesize: this.pagesize,
						activity_code: code,
						user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						uni.hideLoading()
						let _this = this;
						if (res.code == 1) {
							_this.list = res.data.data;
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {
						uni.hideLoading()
					})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.top-banner {
			width: 100%;
			image {
				max-width: 100%;
				max-height: 100%;
			}
		}

		.main-content {
		}

		.video-common-mt {
			margin:0 30rpx;
            margin-top: 20rpx;
			.ztVideo {
				width: 100%;
				height: 390rpx;
			}
		}
        .titles{
			font-size: 40rpx;
			    color: #fff;
			    text-align: center;
			    line-height: 80rpx;
		}
		.goods-box {
			margin: 0 15rpx;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
            .goodnow{
				background: #fff;
				border-radius: 15rpx;
				overflow: hidden;
			}
			.goods-item {
				width: 50%;
				height: auto;
				padding: 0 15rpx;
				padding-bottom: 15rpx;
				margin-bottom: 20rpx;
				text-align: center;
				.goods-image {
					width: 100%;
					margin-bottom: 15rpx;
				}

				.title {
					width:264rpx;
					margin: auto;
					height: 50rpx;
					padding:10rpx;
					color: #fff;
					text-align: center;
					line-height: 30rpx;
					border-radius: 20rpx;
					background-color: #da1617;
					white-space: nowrap;
					    text-overflow: ellipsis;
					    overflow: hidden;
				}

				.msg {
					font-weight: 550;
					color:#6b6b6b;
					width: 90%;
					margin: 14rpx auto;
					white-space: nowrap;
					    text-overflow: ellipsis;
					    overflow: hidden;
				}

			}
		}
		.u-parse{
		}
	}
</style>
